<template>
  <div class="container" ref="mainCon">
    <topTitle
      :titleText="titleText"
      :titleExplain="titleExplain"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <div>
        <el-row style="padding: 0 24px 24px">
          <div class="accountInfo">
            <ul class="bankInfo">
              <li>
                <p class="salaryTitle">工资专户账号</p>
                <div v-if="account && account.length > 0">
                  <el-row style="line-height: 40px">
                    <el-col :span="5" class="color999">专户银行</el-col>
                    <el-col :span="10" class="color333">{{
                      bankName || '--'
                    }}</el-col>
                  </el-row>
                  <el-row style="line-height: 40px">
                    <el-col :span="5" class="color999">专户账号</el-col>
                    <el-col :span="14" class="color333">{{
                      account || '--'
                    }}</el-col>
                  </el-row>
                  <el-row style="line-height: 40px">
                    <el-col :span="5" class="color999">银行网点</el-col>
                    <el-col :span="18" class="color333">{{
                      bankSiteName || '--'
                    }}</el-col>
                  </el-row>
                </div>
              </li>
              <li>
                <p class="color999">工资专户余额</p>
                <p class="color333 balace" v-if="balance != null">
                  {{ balance | moneyFormat }}
                </p>
                <p class="color333 balace" v-else>--</p>
                <div class="botBorder"></div>
                <div class="payoff">
                  <div>
                    <p class="color999">总缴纳</p>
                    <p class="color333 botText" v-if="payTotal != null">
                      {{ payTotal | moneyFormat }}
                    </p>
                    <p class="color333 botText" v-else>--</p>
                  </div>
                  <div>
                    <p class="color999">总支出</p>
                    <p class="color333 botText" v-if="expensesTotal != null">
                      {{ expensesTotal | moneyFormat }}
                    </p>
                    <p class="color333 botText" v-else>--</p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </el-row>
        <div class="spacing"></div>
        <el-row style="padding: 24px 0 0 24px">
          <div class="secondaryTitle secondaryTitleTheme">流水明细</div>

          <!-- </el-col>
          <el-col :span="12"> -->

          <el-col :span="24">
            <el-row
              class="toolbar searchInputWidth fl"
              style="padding-bottom: 0; margin-bottom: 0"
            >
              <el-form
                :inline="true"
                :model="filterField"
                ref="searchConditions"
              >
                <el-form-item
                  label="拨款时间"
                  class="row-padding-bottom"
                  style="margin-bottom: 0"
                >
                  <el-date-picker
                    v-model="filterField.createDate"
                    type="date"
                    placeholder="请选择"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item style="margin-bottom: 0">
                  <el-button
                    type="primary"
                    icon="icon iconfont iconchazhao1"
                    @click="searchList"
                    class="searchBtn"
                  >
                    <span>搜索</span>
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
            <div
              v-if="tipsInfo"
              class="tipsInfo fl"
              style="
                padding-left: 15px;
                font-size: 14px;
                color: #999;
                line-height: 36px;
              "
            >
              {{ tipsInfo }}
            </div>
          </el-col>
        </el-row>
      </div>

      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="runningWaterList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="createTime"
            label="时间"
            align="center"
            :formatter="formatTd"
            min-width="15%"
          ></el-table-column>
          <el-table-column
            prop="total"
            label="金额(元)"
            align="center"
            min-width="15%"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="typeDesc"
            label="类型"
            align="center"
            min-width="10%"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column prop="remark" label="备注" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.remark"
                :columnName="'remark'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column prop="projectName" label="所属项目" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="10%">
            <template slot-scope="scope">
              <el-link
                type="primary"
                v-if="isShowUpdate && scope.row.type === 'IN'"
                @click.stop="
                  updateData(
                    scope.$index,
                    scope.row,
                    scope.row.projectName ? 'update' : 'distribute'
                  )
                "
                >{{ scope.row.projectId ? '修改' : '分配' }}</el-link
              >
              <span v-else> -- </span>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关工资专户数据"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>
    <addAccountDialog
      v-if="accountFormVisible"
      :accountFormVisible="accountFormVisible"
      :operationType="operationType"
      @close-dialogStatus="close_addDialog"
      :accountInfo="accountInfo"
    ></addAccountDialog>
    <el-dialog
      :title="eventType === 'update' ? '修改流水' : '分配流水'"
      :visible.sync="runningWater"
      :close-on-click-modal="false"
      @close="cancelRunningWater()"
      width="640px"
      custom-class="brand-dialog-min-width accountDialog oneColumnDialog"
      :modal-append-to-body="false"
    >
      <el-form
        :model="runningWaterForm"
        :rules="formRules"
        ref="runningWaterForm"
        label-width="120px"
        class="runningWaterForm"
      >
        <div class="reminder">
          <i class="el-icon-warning"></i>
          <span
            >选择该条流水的归属，以便区分项目资金使用缴存情况，请谨慎操作</span
          >
        </div>
        <el-form-item
          label="所属项目："
          prop="projectId"
          style="padding-top: 40px"
        >
          <el-select
            v-model="runningWaterForm.projectId"
            placeholder="请选择"
            class="optionWidth"
            clearable
            filterable
          >
            <el-option
              v-for="(item, index) of projectListOptions"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="流水时间：" class="row-padding-bottom">
          <span>{{ runningWaterInfo.createTime || '--' }}</span>
        </el-form-item>
        <el-form-item label="金额：" class="row-padding-bottom">
          <span>{{ runningWaterInfo.total || '--' }}</span>
        </el-form-item>
        <el-form-item label="类型：" class="row-padding-bottom">
          <span>{{ runningWaterInfo.typeDesc || '--' }}</span>
        </el-form-item>
        <el-form-item label="备注：" class="row-padding-bottom">
          <span>{{ runningWaterInfo.remark || '--' }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelRunningWater()" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="saveRunningWater('runningWaterForm')"
          class="save"
          :loading="saveInfoLoading"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
import addAccountDialog from './addAccountDialog'
export default {
  name: 'enterpriseFlowManagement',
  mixins: [scrollTable],
  components: {
    addAccountDialog,
  },
  data() {
    return {
      titleText: '流水管理',
      titleExplain:
        '本页面展示使用同一专户项目的流水信息，需要企业自行调整区分流水的归属项目，以便劳动监察查询及统计，请及时分配区分，以免造成不良影响。',
      //   infoLoading: false, //专户信息加载
      back: true,
      bankName: '', //专户银行
      bankSiteName: '', //银行网点名称
      account: '', //专户账号
      balance: '', //专户余额
      payTotal: '', //专户总缴纳
      expensesTotal: '', //专户总支出
      filterField: {
        createDate: '',
        account: '',
      },
      runningWaterList: [], //流水明细表
      isShow: true, //列表为空
      loading: false, //列表加载
      requestUrl: 'api-acc/companyaccount/expand/accass',
      runningWater: false, //分配流水dialog
      runningWaterForm: {
        //流水信息表单
        projectId: '',
      },
      runningWaterInfo: {}, //单条流水信息
      projectListOptions: [], //修改流水带出项目列表
      formRules: {
        projectId: [
          { required: true, message: '所属项目不能为空', trigger: 'change' },
        ],
      },
      eventType: '',
      accountFormVisible: false, //添加专户dialog
      operationType: '', //专户添加/修改操作
      accountInfo: {}, //传递子组件专户信息
      tipsInfo: '', //提示信息
      saveInfoLoading: false,
      isShowUpdate: '',
      isShowAdd: '',
      isShowExprot: '',
      isShowDetail: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
    }
  },
  filterField: {
    moneyFormat(val) {
      return '￥' + val
    },
  },
  created() {
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('ycCompanyAccount:update') > -1
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('ycCompanyAccount:add') > -1
    this.isShowExprot =
      this.$store.state.buttonLimitsArr.indexOf('ycCompanyAccount:export') > -1
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('ycCompanyAccount:detail') > -1
    this.account = this.$route.query.account
    this.getAcountInfo() //获取专户信息
    // console.log(this.$store.state);
  },
  mounted() {},
  methods: {
    // 添加专户
    addAccount() {
      this.operationType = 'addAccount'
      this.accountFormVisible = true
    },
    // 修改专户
    updateAccount() {
      this.operationType = 'updateAccount'
      this.accountFormVisible = true
    },
    getTableList(data) {
      this.runningWaterList = data
      this.loading = false
      if (this.runningWaterList.length < 1) {
        this.isShow = true
      }
    },
    // 查询流水明细
    searchList() {
      this.loading = true
      this.$refs.pagination.getTableListData()
    },
    // 获取专户信息
    getAcountInfo() {
      this.axios({
        method: 'post',
        url: '/api-acc/companyaccount/expand/current',
        data: { account: this.account },
      })
        .then((res) => {
          if (!res.data.hasError) {
            let data = res.data.result
            console.log('data', data.hasUnallowcatedAccass)
            this.bankName = data.bankName
            this.bankSiteName = data.bankSiteName ? data.bankSiteName : ''
            this.account = data.account
            this.balance = data.balance
            this.payTotal = data.payTotal
            this.expensesTotal = data.expensesTotal
            // 获取流水明细
            this.filterField.account = data.account
            this.searchList()
            // if (data.account) {
            //   this.filterField.account = data.account;
            //   this.$refs.pagination.getTableListData();
            // } else { //专户号为空
            //   this.isShow = true; //列表为空
            //   this.loading = false; //列表加载
            // }
            if (data.hasUnallowcatedAccass) {
              this.tipsInfo =
                '还存在未分配的流水数据，项目流水数据不完整，请及时分配。'
            } else {
              this.tipsInfo = ''
            }
            // 子组件传值内容
            this.accountInfo.bankId = data.bankId
            this.accountInfo.bankSiteId = data.bankSiteId
            this.accountInfo.account = data.account
            this.accountInfo.uploadFile = data.openCertificateFiles
            this.accountInfo.upLoadAgreementFile = data.agreementFiles
            this.accountInfo.id = data.id
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          this.$message.error('专户数据获取失败')
        })
    },
    // 获取项目列表
    getProjectList() {
      //   console.log("getProjectList");
      return new Promise((resolve, reject) => {
        this.axios({
          method: 'get',
          url:
            '/api-acc/accountprojectgrant/expand/granted?account=' +
            this.account,
        })
          .then((res) => {
            resolve(res)
            if (!res.data.hasError) {
              let data = res.data.result
              this.projectListOptions = data
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: 'error',
              })
            }
          })
          .catch((error) => {
            reject(error)
            this.$message.error('项目列表获取失败')
          })
      })
    },
    // 分配修改
    async updateData(index, row, type) {
      //   console.log(row);
      this.eventType = type
      this.runningWater = true
      this.runningWaterInfo = row
      await this.getProjectList()
      if (type === 'update') {
        this.runningWaterForm.projectId = this.runningWaterInfo.projectId
      }
    },
    // 保存分配修改
    saveRunningWater(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.saveInfoLoading = true
          await this.axios({
            method: 'post',
            url: 'api-acc/accass/expand/assignaccass',
            data: {
              id: this.runningWaterInfo.id,
              projectId: this.runningWaterForm.projectId,
            },
          })
            .then((res) => {
              if (!res.data.hasError) {
                this.$message({
                  message: '保存成功',
                  type: 'success',
                })
                this.runningWater = false
                this.getAcountInfo() //刷新页面数据
              } else {
                this.$message({
                  message: res.data.errorMsg,
                  type: 'error',
                })
              }
            })
            .catch((error) => {
              this.$message.error('保存失败')
            })
          this.saveInfoLoading = false
        } else {
          return false
        }
      })
    },
    cancelRunningWater() {
      this.runningWater = false
      this.$refs.runningWaterForm.resetFields()
    },
    // 关闭添加专户
    close_addDialog(val) {
      this.accountFormVisible = false
      // 保存成功则刷新信息
      if (val) {
        this.getAcountInfo() //获取专户信息
      }
    },
    goBack() {
      this.$router.push({
        path: '/home/yiChangCustomRequirements/specialAccountManage',
      })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/yiChangCustomRequirements/specialAccountManage',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .mainCon {
    top: 213px;
  }
  .runWater {
    margin-top: 32px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #dee5f4;
    height: 28px;
  }
  .accountInfo {
    ul li {
      width: 415px;
      height: 200px;
      float: left;
      padding: 24px 30px;
      border: 1px solid #dee5f4;
      .color999 {
        font-family: 'SourceHanSansCN-Regular';
        font-size: 14px;
        color: #adadad;
      }
      .color333 {
        font-family: 'SourceHanSansCN-Normal';
        font-size: 14px;
        color: #333333;
      }
      .balace {
        font-size: 24px;
        line-height: 40px;
      }
      &:first-child {
        background: #f5f7fb;
      }
      &:last-child {
        border-left: none;
        .botBorder {
          width: 100%;
          height: 1px;
          background: #dee5f4;
          margin: 25px 0;
          margin-top: 15px;
        }
        .payoff div {
          width: 50%;
          float: left;
        }
      }
      .botText {
        font-size: 16px;
        line-height: 40px;
      }
      .salaryTitle {
        font-family: 'SourceHanSansCN-Medium';
        font-size: 18px;
        color: #606060;
        margin-bottom: 15px;
      }
    }
  }
  .secondaryTitle {
    margin-bottom: 24px;
    display: inline-block;
    // left: 0;
  }
}
.addBtn {
  width: 88px;
  height: 32px;
  background: #009588;
  border: none;
  border-radius: 18px;
  text-align: center;
  line-height: 32px;
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  color: #ffffff;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  outline: none;
}
.updateBtn {
  width: 88px;
  height: 32px;
  background: #009588;
  border: none;
  border-radius: 18px;
  text-align: center;
  line-height: 32px;
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  color: #ffffff;
  outline: none;
  position: relative;
  top: -5px;
}
/deep/ .el-table .el-link.el-link--primary {
  margin-right: 0;
}

.runningWaterForm {
  position: relative;
}

.reminder {
  color: #666;
  font-size: 14px;
  background: #fffbe6;
  line-height: 36px;
  border-radius: 3px;
  padding: 0 24px;
  // position: fixed;
  // width: 900px;
  position: absolute;
  top: -17px;
  left: -18px;
  right: -18px;
  z-index: 10;
  i {
    color: #ffaa00;
    margin-right: 4px;
    font-size: 20px;
    vertical-align: -2px;
  }
  span {
    color: #ff4d4a;
  }
}
</style>
